<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置商品</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!-- <script src="../../javaScript/renYuanShuJu.js"></script>
    <script src="../../javaScript/fenYe.js"></script>
    <script src="../../javaScript/accountDetails.js"></script> -->
    <script src="../../javaScript/cuxiaoguanli/shuju.js"></script>
    <style>
    body {
        background-color: #F2F2F2;
        width: 1518.4px;
    }
    #first{
        background-color: #F2F2F2;
        font-size: 22px;
    }
    #first2>div:first-child{
        background-color: rgb(250, 250, 250);
        font-size: 16px;
        text-align: center;
    }
    .timeActive{
        background-color:white;
        border-top:1px blue solid;
        color:blue;
        font-weight:bold;
    }
    .container {
        width: 100%;
        line-height: 80px;
        background-color: white;
        border-radius: 2px;
        margin-top: 10px;
    }
    
    .nav_header {
        height: 80px;
    }
    
    .content_right {
        text-align: right;
    }
    
    .drop_down {
        width: 255px;
        height: 40px;
        outline: none
    }
    
    .sousuo,
    .chongzhi {
        width: 85px;
        height: 40px;
        line-height: 36px;
        padding: 0;
        border: 0;
        border-radius: 2px;
    }
    
    .sousuo {
        /* 搜索按钮 */
        background-color: #49A2E8;
        color: white;
    }
    
    .chongzhi {
        /* 重置按钮 */
        color: #666666;
    }
    
    .shanchu,
    .xinzeng {
        width: 80px;
        height: 35px;
        line-height: 33px;
        padding: 0;
        border: 0;
        border-radius: 2px;
    }
    
    .shanchu {
        /* 删除按钮 */
        color: #666666;
        border: rgb(204, 204, 204) 1px solid;
        background-color: white;
    }
    
    .xinzeng {
        /* 新增按钮 */
        color: #49A2E8;
        border: #49A2E8 1px solid;
    }
    
    .table_row span {
        display: inline-block;
        margin-right: 10px;
    }
    
    .table_row span:hover {
        color: #49A2E8;
        cursor: pointer;
    }
    
    .table_page {
        height: 74px;
        line-height: 74px;
    }
    
    .table_page>nav,
    .page_num {
        height: 74px;
        line-height: 74px;
    }
    
    .page_num {
        padding: 20px;
    }
    
    .page_num>ul {
        height: 34px;
        border-radius: 2px;
        padding: 0;
        overflow: hidden;
        transition: all 0.3s linear;
    }
    
    .page_num>ul:hover {
        height: 136px;
    }
    
    .page_num>ul>li {
        list-style: none;
        padding: 0 10px;
        height: 34px;
        line-height: 34px;
        background-color: #F2F2F2;
    }
</style>
</head>
<body>
     <!-- 模态框区域 -->
     <div id="motaikuang"></div>


    <div class="container nav_header" id="first">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                    设置限时购商品
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="first2">
        <div class="row" id="timing">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-2 col-xs-2 timeBtn timeActive">
                        <p><span>10:00</span></p>
                    </div>
                    <div class="col-md-2 col-xs-2 timeBtn">
                        <p><span>14:00</span></p>
                    </div>
                    <div class="col-md-2 col-xs-2 timeBtn">
                        <p><span>18:00</span></p>
                    </div>
                    <div class="col-md-2 col-xs-2 timeBtn">
                        <p><span>22:00</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-1 col-xs-1">
                        <span class="iconfont icon-shujukuliebiao"></span>数据列表
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
                    </div>
                </div>
            </div>
            <div class="col-md-2 content_right"> <button class="xinzeng"><span>+ </span>新增</button></div>
        </div>
        <table class="table table-striped table-hover" id="mytable">
            <thead>
                <tr class="table_row">
                    <th>
                        <input type="checkbox" class="quanxuan" value="">
                    </th>
                    <th>商品编号</th>
                    <th>商品信息</th>
                    <th>活动价格</th>
                    <th>活动划线价</th>
                    <th>原价</th>
                    <th>活动库存</th>
                    <th>库存</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="table_row table_content">

            </tbody>
        </table>
        <div class="row table_page">
            <div class="col-md-9 col-xs-9">
                <input type="checkbox" class="quanxuan" value="">&nbsp&nbsp全选
            </div>
            <nav aria-label="Page navigation" class="col-md-2 col-xs-2">
                <ul class="pagination" id="pages">
                    <li id="pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!-- <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li> -->
                    <li id="next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="col-md-1 col-xs-1 page_num">
                <ul>
                    <li>10条/页<span class="iconfont icon-arrow-down"></span></li>
                    <li>15条/页</li>
                    <li>20条/页</li>
                    <li>25条/页</li>
                </ul>
            </div>
        </div>
    </div>



    <script>
        shijian()
        function shijian(){
            $('#timing').on('click','.timeBtn',function(){
                $(this).addClass('timeActive')
                $(this).siblings().removeClass('timeActive')
            })
        }




       //数据倒入容器中
       var fenyeData = goodsData
        //每一页的数据数
        let beilv = 10
        //当前页数
        let dangqianPage = 0
        //最大页数
        let maxPage
        //设置初始页数
        let chushi = 1

        //插入每一页的数据
        function showTable(data) {
            $('.table_content').html('')
            $('#motaikuang').html('')
            //模态框的id 要和唤起模态框的 按钮的data-target或者href的 内容一样
            $.each(data,function (index,item) {
                $('#motaikuang').append(`  
                    <div class="modal fade" tabindex="-1" role="dialog" id="shanchu_table${item.paixu}">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">是否要确认删除${item.goodsName}的数据</h4>
                                    </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `)


                $('.table_content').append(`
                    <tr>
                        <th>
                            <input type="checkbox" id="" value="${item.paixu}" name="check_table">
                        </th>
                        <td>${item.num}</td>
                        <td>${item.goodsName}</td>
                        <td>${item.hdJiage}</td>
                        <td>${item.hdhxJiage}</td>
                        <td>${item.yuanJiage}</td>
                        <td>${item.hdKucun}</td>
                        <td>${item.kucun}</td>
                        <td>${item.paixu}</td>
                        <td>
                            <span class="shanchu_table del" type="button" data-toggle="modal" data-target="#shanchu_table${item.paixu}">删除</span>
                        </td>
                    </tr>
                `)
            })
        }
        // num: "BH09803945",//商品编号
        // goodsName: "真的有吗",//商品信息
        // hdJiage:"20",//活动价格
        // hdhxJiage:"10",//活动划线价
        // yuanJiage: "30",//原价
        // hdKucun:"1000",//活动库存
        // kucun:"1500",//库存
        // paixu:"2"//排序

        let checkedBoole
        //分页
        function fengye(num,data){
            for (let i = 0; i < $('.page').length; i++) {
                $('.page').eq(i).removeClass('active')
            }
            $('.page').eq(num-1).addClass('active')
            let jishu = (num-1)*beilv
            let arr = data.slice(jishu,jishu+beilv)
            // console.log(num)
            dangqianPage = num
            //根据第几页加载第几页的表格数据
            showTable(arr)

            $('.quanxuan').click(function() { //全选按钮
                if ($(this).prop('checked') == true) {
                    $(".table_content input").prop("checked", true)
                } else {
                    $(".table_content input").prop("checked", false)
                }
            })
            $('.table_content input').click(function() { //获取checked是否为选中
                if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                    $('.shanchu').click(function() {
                        console.log($("input[checked='true']"));
                    })
                } else { //未选中的时候执行这个结果
                    checkedBoole = $(this).prop('checked')
                    $('.shanchu').click(function() {})
                }
            })
        }

        //有几页就插入几页页码
        function showPage(data){
            $('#pages').html('')
            maxPage= Math.ceil(data.length/beilv)
            // console.log(maxPage)
            $('#pages').append(`
            <li id="pre">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
            `)
            for(let i=1;i<=maxPage;i++){
                $('#pages').append(`
                <li class="page"><a href="#">${i}</a></li>
                `)
            }
            $('#pages').append(`
            <li id="next">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
            `)
        }

        show(chushi)
        //加载并展示
        function show(num) {
            showPage(fenyeData)
            fengye(num,fenyeData)
            // showPage(fenyeData)
        }

        //点击页码
        $('#pages').on('click','.page',function () {
        let num = $(this).text()
        // $('#pages').find('.page').addClass('active')
        // $(this).css("background","red")
        dangqianPage = num
        // console.log(dangqianPage)
        // fengye(num, fenyeData)
        show(num)
    })
    
    //上一页
    $('#pages').on('click','#pre',function () {
        if(dangqianPage != 1){
            dangqianPage = parseInt(dangqianPage) - 1
            // console.log(dangqianPage)
            fengye(dangqianPage, fenyeData)
        }
    })
    
     //下一页
     $('#pages').on('click','#next',function () {
        if(dangqianPage != maxPage){
            // console.log(dangqianPage)
            // console.log(maxPage)
            dangqianPage = parseInt(dangqianPage) + 1
            // console.log(dangqianPage)
            fengye(dangqianPage, fenyeData)
        }
     })

     $('.chongzhi').on('click',function () {
        fenyeData = huodongData
        show(1)
    })

    //  //匹配查询
    //  $('.sousuo').on('click',function () {
    //     //先获取查询区域中的数据
    //     let ztVal = $("#zt option:selected").text()
    //     let timeVal = $ ("#time option:selected").text()
    //     let sjTimeVal = $("#sjTime").val()
    //     let xjTimeVal = $("#xjTime").val()
    //     let hdNameVal = $("#hdName").val()
    //     // num: "010",//序号
    //     // huodongName: "打地鼠0",//活动名称
    //     // shangjiaTime:"2021-12-24 9:16:00",//上架时间
    //     // xiajiaTime: "2021-12-24 9:16:00",//下架时间
    //     // shangpinNum:"100",
    //     // zhuangtai:"启用"
    //     console.log(hdNameVal)
    //     let chaxunArr = []
    //     let tishi = 0
    //     //判断状态为启用还是禁用
    //     if(ztVal =='启用' || ztVal =='禁用'){
    //         chaxunArr = huodongData.filter(function(item){
    //             return item.zhuangtai==ztVal
    //         })
    //         tishi = 1
    //     }

    //     //判断是上架时间还是下架时间
    //     if(timeVal =='上架时间'){
    //         //上架时间
    //     if(sjTimeVal != ''){
    //         if(chaxunArr.length >0 || tishi == 1){
    //             chaxunArr = chaxunArr.filter(function (item) {
    //                 return item.shangjiaTime == sjTimeVal
    //             })
    //         }else{ //id为空时
    //             chaxunArr = huodongData.filter(function (item) {
    //                 return item.shangjiaTime == sjTimeVal
    //             })
    //             tishi = 1
    //         }
    //     }
    //     }else if(timeVal =='下架时间'){
    //         //下架时间
    //     if(xjTimeVal != ''){
    //         if(chaxunArr.length >0 || tishi == 1){
    //             chaxunArr = chaxunArr.filter(function (item) {
    //                 return item.xiajiaTime == xjTimeVal
    //             })
    //         }else{ //id和name为空时
    //             chaxunArr = huodongData.filter(function (item) {
    //                 return item.xiajiaTime == xjTimeVal
    //             })
    //             tishi = 1
    //         }
    //     }
    //     }
        
    //     //活动名称
    //     if(hdNameVal != ''){
    //         if(chaxunArr.length >0 || tishi == 1){
    //             chaxunArr = chaxunArr.filter(function (item) {
    //                 return item.huodongName == hdNameVal
    //             })
    //         }else(    //id、name和sex为空时 
    //         chaxunArr = huodongData.filter(function (item) {
    //                 return item.huodongName == hdNameVal
    //             })
    //         )
    //     }
    //     console.log(chaxunArr)
    //     fenyeData = chaxunArr
    //     let num = Math.ceil(fenyeData.length/beilv)
    //     show(chushi)
    // })

    
    //删除本行(要删除数组中的数据)
    // $('#mytable tbody').on('click','.del',function () {
    //     $(this).parent().parent().remove()
    //     for(let i=0;i< goodsData.length;i++){
    //         if( goodsData[i].num == $(this).parent().parent().find('td:nth-child(2)').text()){
    //             goodsData.splice(i,1)
    //             fenyeData = goodsData
    //             show(1)
    //             break;
    //         }
    //     }
    // })



    let del_table    //设置指代的变量
    $('#mytable tbody').on('click','.del',function (){
        del_table = $(this)
    })
    $('#motaikuang').on('click', '.btn-primary', function() {
        del_table.parent().parent().remove()
        for(let i=0;i<goodsData.length;i++){
            if( goodsData[i].num == del_table.parent().parent().find('td:nth-child(2)').text()){
                goodsData.splice(i,1)
                fenyeData = goodsData
                show(dangqianPage)
                // $('.fade').css({ display: 'none' })
                break;
            }
        }
        $(this).parent().parent().parent().parent().remove()
        $('.fade').css({ display: 'none' })
    })



    //批量删除
    $('.shanchu').click(function() {
        if (confirm('是否确定删除？')) {
            $("input[name='check_table']:checked").each(function() { // 遍历选中的checkbox
                let n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
                let m = parseInt($(".table_content").find("tr:eq(" + n + ")").children().eq(8).text()) //所在行的id值
                console.log(m)
                console.log(n)
                $(".table_content").find("tr:eq(" + n + ")").remove();
                for (let i = 0; i < goodsData.length; i++) {
                    if (m == fenyeData[i].paixu) {
                        console.log(fenyeData[i].paixu)
                        console.log(goodsData[i].paixu)
                        fenyeData.splice(i, 1)
                        i--
                        // fenyeData = goodsData
                        break
                    }
                }
            });
            show(dangqianPage)
            // fengye(num, goodsData)
            // showPage(goodsData)
            alert('删除成功')
        }
    })
    </script>
</body>
</html>